
<template>
  <div style="display: inline-flex">
    <el-button type="primary" plain @click="mapVisible = true">获取经纬度</el-button>
    <el-dialog id="mapDialog" :visible.sync="mapVisible" :append-to-body="true" :close-on-click-modal="true" top="5vh" width="1000px" title="定位设置">
      <div class="demo-input-suffix">
        <el-link type="info">关键词：</el-link><el-input v-model="keyword" class="lineinput" style="width:90%" size="mini"/>
        <el-link type="info">精度：</el-link><el-input v-model.number="locData.longitude" class="lineinput" style="width:150px;margin-top: 10px" size="mini"/>
        <el-link type="info">纬度：</el-link><el-input v-model.number="locData.latitude" class="lineinput" style="width:150px" size="mini"/>
        <el-link type="info">详细地址：</el-link><el-input v-model="locData.address" class="lineinput" style="width:300px" size="mini"/>
      </div>
      <br>
      <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" class="map" ak="38l5jQRG55FTV5FRz9itM8ABr7Zqx6or" @ready="handler" @click="clickEvent">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"/>
        <bm-view :style="{width:'100%',height: 50 +'vh',flex: 1,marginBottom:'-30px'}"/>
        <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"/>
      </baidu-map>
      <br>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" size="small" icon="el-icon-close" @click.native="mapVisible = false">取消</el-button>
        <el-button type="primary" size="small" icon="el-icon-check" @click.native="findLocation">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { BaiduMap, BmNavigation, BmView, BmCityList, BmLocalSearch } from 'vue-baidu-map'
export default {
  name: 'MapDialog',
  components: {
    BaiduMap,
    BmNavigation,
    BmView,
    BmLocalSearch,
    BmCityList
  },
  data() {
    return {
      center: { },
      zoom: 12,
      mapVisible: false,
      map: '',
      keyword: '',
      location: '',
      BMap: '',
      locData: {
        longitude: '',
        latitude: '',
        address: ''
      }
    }
  },
  methods: {
    handler({ BMap, map }) {
      const _this = this	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function(r) {
        _this.center = { lng: r.longitude, lat: r.latitude }		// 设置center属性值
        _this.autoLocationPoint = { lng: r.longitude, lat: r.latitude }		// 自定义覆盖物
        _this.initLocation = true
      }, { enableHighAccuracy: true })

      this.map = map
      this.BMap = BMap
    },
    // 点击地图监听
    clickEvent(e) {
      const BMap = this.BMap
      this.map.clearOverlays()
      var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))
      this.map.addOverlay(myMarker)
      // 用所定位的经纬度查找所在地省市街道等信息
      var point = new BMap.Point(e.point.lng, e.point.lat)
      var gc = new BMap.Geocoder()
      const _this = this
      gc.getLocation(point, function(rs) {
        _this.locData.address = rs.address
        _this.location = rs.address
      })
      _this.locData.longitude = e.point.lng
      _this.locData.latitude = e.point.lat
    },
    findLocation() {
      this.$emit('findlocdata', this.locData)
      this.mapVisible = false
    }
  }

}
</script>
